<!--
 * @file 带检索的列表
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2022/08/17
-->
<template>
  <SearchTableCard>
    <!-- 查询区域 -->
    <template #search>
      <div class="page-search-wrapper">
        <a-form
          ref="searchFormRef"
          :model="searchFormState"
          @keyup.enter="onSearch"
        >
          <a-row :gutter="24">
            <a-col v-bind="colSpan">
              <a-form-item label="姓名" name="teacherName">
                <a-input
                  v-model:value="searchFormState.teacherName"
                  placeholder="请输入姓名"
                  allowClear
                  autocomplete="off"
                />
              </a-form-item>
            </a-col>

            <template v-if="showMoreSearch">
              <a-col v-bind="colSpan">
                <a-form-item label="电话" name="mobile">
                  <a-input
                    v-model:value="searchFormState.mobile"
                    placeholder="请输入电话"
                    allowClear
                    autocomplete="off"
                  />
                </a-form-item>
              </a-col>
            </template>

            <a-col v-bind="colSpan">
              <span class="page-search-buttons">
                <a-button type="primary" @click="onSearch">
                  <template #icon><search-outlined /></template>
                  查询
                </a-button>
                <a-button @click="onResetSearch">
                  <template #icon><reload-outlined /></template>
                  重置
                </a-button>
                <a-button @click="showMoreSearch = !showMoreSearch" type="link">
                  {{ showMoreSearch ? '收起' : '展开' }}
                  <component
                    :is="showMoreSearch ? 'up-outlined' : 'down-outlined'"
                  ></component>
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <!-- 操作按钮区域 -->
    <template #operator>
      <div class="page-operator">
        <a-button
          type="primary"
          @click="onEdit(1, { schoolId: '1491237560419168258' })"
        >
          <template #icon>
            <plus-outlined></plus-outlined>
          </template>
          新增
        </a-button>
      </div>
    </template>

    <!-- table区域 -->
    <template #list>
      <ItsTable
        :columns="columns"
        :data-source="list"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button
              type="link"
              @click="onEdit(2, { ...record, schoolId: '1491237560419168258' })"
              >编辑</a-button
            >
            <a-popconfirm
              title="确定删除吗？"
              @confirm="onDelete({ schoolUserId: record.schoolUserId })"
            >
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </ItsTable>
    </template>

    <!-- 添加、编辑弹框 -->
    <EditForm
      ref="editFormRef"
      v-model:visible="showForm"
      :model="mdl"
      @sure="onOk"
    ></EditForm>
  </SearchTableCard>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
  SearchOutlined,
  ReloadOutlined,
  PlusOutlined,
  DownOutlined,
  UpOutlined
} from '@ant-design/icons-vue'
import SearchTableCard from '@/components/searchTableCard/Index.vue'
import searchTable from '@/common/searchTable'
import { getList, del } from '@/apis/example'
import ItsTable from '@/components/itsTable/Index.vue'
import EditForm from './modules/EditForm.vue'

export default defineComponent({
  name: 'SearchTable',
  components: {
    SearchTableCard,
    SearchOutlined,
    ReloadOutlined,
    PlusOutlined,
    DownOutlined,
    UpOutlined,
    ItsTable,
    EditForm
  },
  setup() {
    /**
     * 查询条件
     */
    const params = {
      schoolId: '1491237560419168258' // dev
      // schoolId: '1465516853370634242' // qa
    }

    const searchTableBase = searchTable<any>({
      params,
      getList,
      del
    })

    const { loadList } = searchTableBase
    loadList()

    const columns = [
      {
        title: '姓名',
        dataIndex: 'teacherName',
        sorter: true
      },
      {
        title: '电话',
        dataIndex: 'mobile'
      },
      {
        title: '班级',
        dataIndex: 'manageClass'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 140
      }
    ]

    return {
      ...searchTableBase,
      columns
    }
  }
})
</script>

<style scoped lang="less">
</style>
